<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>VinsGuru - Jokes App / SSE</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
<script>
    var source = new EventSource("joke");
    source.onmessage = function(event) {
      let data = JSON.parse(event.data);
      document.getElementById("qn").innerHTML = data.setup;
      document.getElementById("ans").innerHTML = data.punchline;
    };
  </script>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
      <a class="navbar-brand" href="#">VinsGuru - Jokes App / SSE</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h1 class="mt-5">Joke of this moment!</h1>
        <p class="lead">This site will keep you laughing every 3 seconds using Server sent events!</p>
        <div class="card text-left mt-5" >
          <div class="card-header" id="qn">
            Joke Qn
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item" id="ans">Joke Ans</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.slim.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>
